// 自定义导航组件
import React from 'react'

import { withRouter, Route } from 'react-router-dom'

const MyLink = props => {

  const gourl = () => {
    // 编程式导航
    props.history.push(props.to)
  }

  // react组件首字母大写
  const Tag = props.tag || 'a'
  const active = props['active-class'] || 'router-active-class'
  return (
    <Route path={props.to} children={({ match }) => {
      if (match) {
        // return <Tag className={active} onClick={gourl}>{props.children}</Tag>
        return <Tag style={{ color: 'red' }} onClick={gourl}>{props.children}</Tag>
      }
      return <Tag onClick={gourl}>{props.children}</Tag>
    }} />

  )
}

export default withRouter(MyLink)
